<template>
	<section>
		<!--工具条-->
		<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
			<el-form :inline="true" :model="filters">
				<el-form-item>
					<el-date-picker type="datetime" placeholder="开始时间" v-model="filters.startTime" style="width:100%;"></el-date-picker>
				</el-form-item>
				<el-form-item>
					<el-date-picker type="datetime" placeholder="结束时间" v-model="filters.endTime" style="width:100%;"></el-date-picker>
				</el-form-item>
				
				<el-form-item>
					<el-select v-model="filters.pushType" clearable placeholder="推送对象">
						<el-option
			  				v-for="item,index in options"
			  	      			:label="item.label"
			  	      			:value="item.value"
								:key="index">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="所属门店">
					<el-select v-model="filters.storeId" clearable placeholder="所属门店">
						<el-option v-for="item,index in roles" :label="item.name" :value="item.id" :key="index"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" v-on:click="getUsers">查询</el-button>
				</el-form-item>
				<!--<el-form-item>
					<el-button type="danger" @click="reset('filters')">重置</el-button>
				</el-form-item>-->
				<el-form-item>
					<el-button type="primary" @click="handleAdd">新增</el-button>
				</el-form-item>
			</el-form>
		</el-col>

		<!--列表-->
		<el-table :data="users" highlight-current-row v-loading="listLoading" @selection-change="selsChange" style="width: 100%;" stripe border>
			<el-table-column type="index" width="200" label="编号" align="center" >
			</el-table-column>
			<!--<el-table-column prop="content" label="推送内容" width="290" align="center" >
				<template slot-scope="scope">
	              <el-popover trigger="hover" placement="top">
	                <p style="width: 250px;line-height: 1.5;">{{ scope.row.content }}</p>
		                <div slot="reference" class="name-wrapper">
		                  <p style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">{{ scope.row.content }}</p>
		                </div>
	              </el-popover>
            	</template>
			</el-table-column>-->
			<el-table-column prop="pushType" label="推送对象" min-width="240" :formatter="formatType" align="center" >
				<template slot-scope="scope">
	            	<el-tag type="success" v-if="scope.row.pushType == 0">全部用户</el-tag>
	                <el-tag type="success" v-if="scope.row.pushType == 1">门店用户</el-tag>
            	</template>
			</el-table-column>
			<el-table-column prop="displayTime" label="定时推送时间"  min-width="300" align="center" >
				<template slot-scope="scope">
					<span>{{scope.row.displayTime}} </span>
				</template>
			</el-table-column>
			<el-table-column prop="createTime" label="创建时间" min-width="300" align="center" >
				<template slot-scope="scope">
					<span>{{scope.row.createTime}} </span>
				</template>
			</el-table-column>
			<el-table-column label="操作" min-width="300" align="center" >
				<template slot-scope="scope">
					<el-button size="small" @click="handleEdit(scope.$index, scope.row)">查看</el-button>
					<!--<el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>-->
					<el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		
		<!--工具条-->
		<el-col :span="24" class="toolbar">
			<el-pagination
	          class="top"
	          @size-change="handleSizeChange"
	          @current-change="handleCurrentChange"
	          :current-page="currentPage"
	          :page-sizes="[10, 15, 20, 30]"
	          :page-size="pageSize"
	          layout="total, sizes, prev, pager, next, jumper"
	          :total='total'
	          style="float:right;">
	        </el-pagination>
		</el-col>

		<!--查询界面-->
		<el-dialog title="详情" v-model="editFormVisible" :close-on-click-modal="false">
			<el-form :model="editForm" label-width="120px" :rules="editFormRules" ref="editForm">
				<el-form-item label="推送对象" prop="pushType">
					<el-radio-group v-model="editForm.pushType" :readonly="true">
						<el-radio class="radio" :label="0">全部用户</el-radio>
						<el-radio class="radio" :label="1">仅门店用户</el-radio>
						<!--<el-input v-model="editForm.pushId"  auto-complete="off" ></el-input>-->
						
						<el-select  v-model="editForm.pushId" clearable placeholder="所属门店" disabled>
							<el-option
				  				v-for="item,index in roles"
				  	      		:label="item.name"
				  	      		:value="item.id"
								:key="index">
							</el-option>
						</el-select>
					</el-radio-group>
				</el-form-item>
				
				<el-form-item label="推送内容" prop="content">
					<el-input v-model="editForm.content" type="textarea" :rows="6" auto-complete="off" :readonly="true"></el-input>
				</el-form-item>
				<el-form-item label="定时推送时间" prop="displayTime">
					<el-date-picker type="datetime" placeholder="选择日期" v-model="editForm.displayTime" :readonly="true"></el-date-picker>
				</el-form-item>
			</el-form>
			
		</el-dialog>

		<!--新增界面-->
		<el-dialog title="新增" v-model="addFormVisible" :close-on-click-modal="false">
			<el-form :model="addForm" label-width="120px" :rules="addFormRules" ref="addForm">
				<el-form-item label="推送对象" prop="pushType">
					<el-radio-group v-model="addForm.pushType">
						<el-radio class="radio" :label="0">全部用户</el-radio>
						<el-radio class="radio" :label="1">仅门店用户</el-radio>
						<!--<el-input v-model="addForm.pushId"  auto-complete="off" ></el-input>-->
						<!--<el-select v-if="addForm.pushType == '1'" v-model="addForm.pushId" placeholder="请选择门店">
							<el-option label="总部" value="0"></el-option>
							<el-option label="上海川沙店" value="1"></el-option>
							<el-option label="上海宝山店" value="2"></el-option>
						</el-select>-->
						<el-select v-if="addForm.pushType == '1'" v-model="addForm.pushId" clearable placeholder="所属门店">
							<el-option
				  				v-for="item,index in roles"
				  	      			:label="item.name"
				  	      			:value="item.id"
									:key="index">
							</el-option>
						</el-select>
					</el-radio-group>
				</el-form-item>
				<!--<el-form-item label="富文本内容">
				    <UE ref="ueAdd"></UE>
				</el-form-item>-->
				
				<el-form-item label="推送内容" prop="content">
					<el-input v-model="addForm.content" type="textarea" :rows="6" auto-complete="off" ></el-input>
				</el-form-item>
				<el-form-item label="定时推送时间" prop="displayTime">
					<el-date-picker type="datetime" placeholder="选择日期" v-model="addForm.displayTime"></el-date-picker>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click.native="addFormVisible = false">取消</el-button>
				<el-button type="primary" @click.native="addSubmit" :loading="addLoading">提交</el-button>
			</div>
		</el-dialog>
	</section>
</template>

<script>
	import { queryMessage ,deleteMessage,addMessage,getRoleList} from '../../api/api';
	import UE from '@/components/UE'

	export default {
		filters: {
            formatDate(time) {
                var date = new Date(time);
                return formatDate(date, 'yyyy-MM-dd hh:mm:ss');
            }
        },
		data() {
			let validatePushType = (rule, value, callback) => {
		        if (value === '') {
		          callback(new Error('请输入内容'));
		        } else {
		          callback();
		        }
		      };
		    let validateContent = (rule, value, callback) => {
		        if (value === '') {
		          callback(new Error('请输入内容'));
		        } else {
		          callback();
		        }
		      };
			return {
				roles:[],
				options: [{
			      value: '',
			      label: ''
			    }, {
			      value: '0',
			      label: '全部用户'
			    }, {
			      value: '1',
			      label: '门店用户'
			    }],
				filters: {
					storeId: '',
					startTime: '',
					endTime: '',
					pushType: '',
				},
				users: [],
				//分页
				total: 0,
				page: 1,
				pageSize:10,
				currentPage:1,
				listLoading: false,
				sels: [],//列表选中列

				editFormVisible: false,//编辑界面是否显示
				editLoading: false,
				editFormRules: {
					pushType: [
						{ required: true, message: '请输入推送对象', trigger: 'blur' }
					],
					content: [
						{ required: true, message: '请输入推送内容', trigger: 'blur' }
					],
					displayTime: [
		             	{ type: 'date', required: true, message: '请选择日期', trigger: 'change' }
		            ],
				},
				//编辑界面数据
				editForm: {
					id: 0,
					pushType: '',
					pushId: '',
					content: '',
					displayTime: '',
				},

				addFormVisible: false,//新增界面是否显示
				addLoading: false,
				addFormRules: {
					pushType: [
						{ validator: validatePushType, trigger: 'blur' }
					],
					content: [
						{ validator: validateContent, trigger: 'blur' }
					],
					displayTime: [
		             	{ type: 'date', required: true, message: '请选择日期', trigger: 'change' }
		            ],
				},
				//新增界面数据
				addForm: {
					pushType: '',
					pushId: '',
					content: '',
					displayTime: '',
				},
				typeChoose: '1',

			}
		},
		methods: {
			//分页
			handleCurrentChange(val) {
				this.page = val;
				this.getUsers();
			},
			handleSizeChange(val) {
		        this.pageSize = val;
		        this.getUsers();
		    },
			addContent() {
		        return this.$refs.ueAdd.getUEContent();
		    },
			//重置
			reset(filters) {
				this.$refs[filters].resetFields();
			},
			//推送对象显示转换
			formatType: function (row, column) {
				if(row.pushType == 0){
					return "全部用户";
				}
				if(row.pushType == 1){
					return "门店用户";
				}
			},
			handleCurrentChange(val) {
				this.page = val;
				this.getUsers();
			},
			//获取用户列表
			getUsers() {
				let para = {
					page: this.page,
					pushType:this.pushType,
					startTime:this.startTime,
					endTime:this.endTime,
					pageSize: this.pageSize,
					pageIndex: this.page,
					
				};
				if(!this.filters.pushType == '') {
					para.pushType = this.filters.pushType
				}
				if(!this.filters.startTime == '') {
				   para.startTime = this.filters.startTime
				}
				if(!this.filters.endTime == '') {
				   para.endTime = this.filters.endTime
				}
				if(!this.filters.storeId == '') {
					para.pushId = this.filters.storeId
				}
				this.listLoading = true;
				queryMessage(para).then((res) => {
					this.total = res.data.totalCount;
					this.users = res.data.data;
					this.users.map((v,i) => {
						v.createTime = this.moment(v.createTime).format('YYYY-MM-DD HH:mm:ss');
						if(!v.displayTime == '' || undefined || null) {
							v.displayTime = this.moment(v.displayTime).format('YYYY-MM-DD HH:mm:ss');
						}
					})
					this.listLoading = false;
				});
			},
			//获取角色类型列表
			getRoles() {
				let para = {};
				this.listLoading = true;
				getRoleList(para).then((res) => {
					this.roles = res.data.data;
					this.listLoading = false;
				});
			},
			//删除
			handleDel: function (index, row) {
				this.$confirm('确认删除该记录吗?', '提示', {
					type: 'warning'
				}).then(() => {
					this.listLoading = true;
					//NProgress.start();
					let para = { id: row.id };
					deleteMessage(para).then((res) => {
						this.listLoading = false;
						//NProgress.done();
						this.$message({
							message: '删除成功',
							type: 'success'
						});
						this.getUsers();
					});
				}).catch(() => {

				});
			},
			//显示编辑界面
			handleEdit: function (index, row) {
				this.editFormVisible = true;
				console.log(row)
				this.editForm = Object.assign({}, row);
				if(row.pushId==0){
					return this.editForm.pushId = '总部';
				}
				if(row.pushId==2){
					return this.editForm.pushId = '上海宝山店';
				}
				if(row.pushId ==1){
					return this.editForm.pushId = '上海川沙店';
				}
			},
			//显示新增界面
			handleAdd: function () {
				this.addFormVisible = true;
				this.addForm = {
					pushType: '',
					pushId: '',
					content: '',
					displayTime: '',
				};
			},
			//编辑
			editSubmit: function () {
				this.$refs.editForm.validate((valid) => {
					if (valid) {
						this.$confirm('确认提交吗？', '提示', {}).then(() => {
							this.editLoading = true;
							//NProgress.start();
							let para = Object.assign({}, this.editForm);
							para.creatTime = (!para.creatTime || para.creatTime == '') ? '' : util.formatDate.format(new Date(para.creatTime), 'yyyy-MM-dd hh:mm');
							updateMessage(para).then((res) => {
								this.editLoading = false;
								//NProgress.done();
								this.$message({
									message: '提交成功',
									type: 'success'
								});
								this.$refs['editForm'].resetFields();
								this.editFormVisible = false;
								this.getUsers();
							});
						});
					}
				});
			},
			//新增
			addSubmit: function () {
				this.$refs.addForm.validate((valid) => {
					if (valid) {
						this.$confirm('确认提交吗？', '提示', {}).then(() => {
							this.addLoading = true;
							//NProgress.start();
//							let para = Object.assign({}, this.addForm);
							
							var params = { pushType:this.addForm.pushType, pushId: this.addForm.pushId, content: this.addForm.content, displayTime: this.addForm.displayTime,};
							console.log(params)
							addMessage(params).then((res) => {
								this.addLoading = false;
								//NProgress.done();
								this.$message({
									message: '提交成功',
									type: 'success'
								});
								this.$refs['addForm'].resetFields();
								this.addFormVisible = false;
								this.getUsers();
							});
						});
					}
				});
			},
			selsChange: function (sels) {
				this.sels = sels;
			},
			//批量删除
			batchRemove: function () {
				var ids = this.sels.map(item => item.id).toString();
				this.$confirm('确认删除选中记录吗？', '提示', {
					type: 'warning'
				}).then(() => {
					this.listLoading = true;
					//NProgress.start();
					let para = { ids: ids };
					batchRemoveUser(para).then((res) => {
						this.listLoading = false;
						//NProgress.done();
						this.$message({
							message: '删除成功',
							type: 'success'
						});
						this.getUsers();
					});
				}).catch(() => {

				});
			}
		},
		mounted() {
			this.getUsers();
			this.getRoles();
		},
		components: {
            UE
        },

	}

</script>

<style scoped>

</style>
